/**
 * Created by ThinkPad on 2018/1/24.
 */
$(function () {
    //获取到li盒子
    var $li = $(".slide_pics li");
    //将除过第一个li盒子位置的其他的盒子位置全部移动到另外一侧
    $li.not(":first").css({left:760});
    //获取li盒子的长度
    var len = $li.length;
    //动态生成li
    $li.each(function (index) {
        //创建li标签
        var $sli = $("<li>");
        //如果是第一个li的话，就添加一个类名
        if(index==0){
            $sli.addClass("active");
        }
        //将创建好的li放入ul盒子里面
        $sli.appendTo(".points");
    });

    //将要运动过来的li
    var nowli = 0;
    //当前要离开的li
    var prevli = 0;

    //获取动态创建的小圆点li,并给所有的小圆点li添加一个点击方法
    $points = $(".points li");
    $points.click(function () {
        //将当前正在点击的小圆点li的下标赋给将要运动过来的li
        nowli = $(this).index();
        //给当前正在点击的小圆点添加类名，并移除其他小圆点的类名
        $(this).addClass("active").siblings().removeClass("active");
        //当将要运动过来的li和将要移动的li是同一个的时候
        if(nowli == prevli){
            //下面的东西将不在执行
            return;
        }
        //创建一个运动的方法move
        move();
    })

    //获取上一张按钮
    var $prev = $(".prev");
    //获取下一张按钮
    var $next = $(".next");

    //当点击上一张按钮的时候执行一个方法 
    $prev.click(function () {
        nowli--;
        move();
        $points.eq(nowli).addClass("active").siblings().removeClass("active");
    });

    //当点击下一张按钮的时候执行一个方法
    $next.click(function () {
        nowli++;
        move();
        $points.eq(nowli).addClass("active").siblings().removeClass("active");
    })

    //创建定义move这个函数
    function move() {
        if(nowli < 0){
            nowli = len - 1;
            prevli = 0;
            //将正在发生的li放在左边去
            $li.eq(nowli).css({left:-760});
            //将当前要离开的li移动到右边去
            $li.eq(prevli).stop().animate({left:760})
            //将要运动过来的li方法指定的位置
            $li.eq(nowli).stop().animate({left:0});
            //将运动过来的li的值赋给将要离开的li盒子的值
            prevli = nowli;
            //不在执行下面的
            return;
        }
        if(nowli > len - 1){
            nowli = 0;
            prevli = len - 1;
            //将正在发生的li放在右边去
            $li.eq(nowli).css({left:760});
            //将当前要离开的li移动到左边去
            $li.eq(prevli).stop().animate({left:-760});
            //将要运动过来的li方法指定的位置
            $li.eq(nowli).stop().animate({left:0});
            //将运动过来的li的值赋给将要离开的li盒子的值
            prevli = nowli;
            //不在执行下面的
            return;
        }
        //从小到大的滚动，nowli在右边，prevli在左边
        if(nowli > prevli){
            //将正在发生的li放在右边去
            $li.eq(nowli).css({left:760});
            //将当前要离开的li移动到左边去
            $li.eq(prevli).stop().animate({left:-760})
        }else{
            //从大到小的滚动，nowli在左边，prevli在右边
            //将正在发生的li放在左边去
            $li.eq(nowli).css({left:-760});
            //将当前要离开的li移动到右边去
            $li.eq(prevli).stop().animate({left:760})
        }
        //将要运动过来的li方法指定的位置
        $li.eq(nowli).stop().animate({left:0});
        //将运动过来的li的值赋给将要离开的li盒子的值
        prevli = nowli;
    }

    //初始化一个变量timer,用来保存定时器
    var timer = null;

    //开启定时器,自动播放
    function autoPlay() {
        nowli++;
        move();
        $points.eq(nowli).addClass("active").siblings().removeClass("active");
    }

    timer = setInterval(autoPlay,2000);
});